<template>
  <div ref="store" class="store" />
</template>

<script>
import * as echarts from 'echarts/core'
import {
  BarChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
)
export default {
  name: 'Store',
  mounted() {
    var myChart = echarts.init(this.$refs.store)
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        data: ['待审核', '共享商铺', '违规被停运']
      },
      color: ['#1890ff', '#2fc25b', '#facc14'],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['2012', '2013', '2014', '2015', '2016']

      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: '待审核',
          type: 'bar',
          barWidth: 40,
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [20, 45, 30, 13, 20]
        },
        {
          name: '共享商铺',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [10, 5, 30, 2, 10]
        },
        {
          name: '违规被停运',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [20, 15, 5, 22, 22]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.store {
  height: 100%;
  width: 100%;
}
</style>
